<template>
    <div class="item">
        <img src="@/assets/location2.png" alt="">
        <div class="content">
            <div class="info">
                <span class="name">{{item.name}}</span>
                <span class="phone">{{item.phone}}</span>
            </div>
            <div class="address">
                <p>{{item.address}}</p>
            </div>
        </div>
        <div class="update">
            <img src="@/assets/update.png" alt="" @click="goUpdate(item)">
            <p @click="delAddress(item._id)">删除</p>
        </div>

        <p class="default" v-if="Boolean(item.isDefaul)">默认地址</p>
    </div>
</template>

<script>
    export default {
        name:"Item-Location",
        props:['item'],
        methods: {
            delAddress(_id){
                this.$store.dispatch('About/delAddress',_id)
                this.$store.dispatch('About/getLocationList')
            },
            goUpdate(item){
                this.$router.push({
                    path:'/updateLocation',
                    query:{
                        item,
                    }
                })
            }
        },
    }
</script>

<style scoped lang="less">
    .item{
        width: 95%;
        margin: 0 auto;
        background: #fff;
        display: flex;
        justify-content: space-between;
        padding: 5.3vw 0 4vw 0;
        border-bottom: 0.3vw solid rgb(221, 221, 221);
        position: relative;

        img{
            width: 5.3vw;
            height: 5.3vw;
        }

        .info{
            flex:1;
            width:74.7vw;
            font-weight: 600;
            margin-bottom: 1.3vw;
            font-size: 3.7vw;
            .name{
                margin-right: 2.7vw;
            }
        }

        .address{
            display: flex;
        }

        .update{
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;

            p{
                width: 10.7vw;
                text-align: center;
                background: red;
                color: #fff;
                height: 6.7vw;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 2.1vw;
                border-radius: 1.3vw;
            }
        }

        .default{
            position: absolute;
            width: 16vw;
            height: 5.3vw;
            line-height: 5.3vw;
            border: 0.3vw solid #4C90E8;
            border-radius: 2.7vw;
            text-align: center;
            left: 65vw;
            color: #4C90E8;
            top: 4.8vw;
            font-size: 3.2vw;
        }
    }

    
</style>